<template>
    <div>
        <van-nav-bar
        :title=msg
        left-text="返回"
        right-text="清空购物车"
        left-arrow
        @click-left="goback"
        @click-right="cartEmptyFn"
        />

        <div  class='goodsDiv' v-for= 'item in shopCartList'>
            <div  class='eachGood'>
                <label> <img :src= 'item._goodsImg' /></label>
                <h2>{{item._goodsName}}，数量{{item._num}},单价{{item._price}}</h2>

                <!-- async-change必须是异步，否则将计算点击之前的值 -->
                <van-stepper 
                :async-change=true
                v-model="item['_num']" 
                @plus='addBtnFn'
                @minus='minusBtnFn'/>
            
            </div>
        </div>

        <van-submit-bar class='submitFn'
        :price=allGoodsMoney*100
        :button-text=submitText
        @submit="onSubmit"
        />
        <h1 v-if='isCartEmpty'>购物车是空的</h1>
        <h1 v-if='isCartEmpty'>去首页逛逛吧</h1>

        <footerBar></footerBar>
    </div>

</template>
<script>
import axios from 'axios'
import API_LIST from '@/APIList.config'
import {Toast} from 'vant'
import {mapGetters,mapActions} from 'vuex'
import footerBar from './footerBar'

export default {
    name:'cart',
    data(){
        return{
            msg:'购物车',
            cartArr:'',
            allGoodsNum:0,
            submitText:'',
            allGoodsMoney:0,
            isCartEmpty:false

        }
    },
    components:{footerBar},
    created(){
        this.cartArr = localStorage.cartDataInfo
                    ?JSON.parse(localStorage.cartDataInfo)
                    :[];
        //console.log(this.cartArr);
        this.countAllGoodsNum();
        this.countAllGoodsMoney();

        if(this.cartArr.length==0){
            this.isCartEmpty= true;
        }

        //vuex, this.cartArr就是购物车中的商品
        this.addToVuex(this.cartArr)
    },
    computed:{
        //映射数据
        ...mapGetters(['shopCartList'])
    },
    methods:{
        //映射事件
        ...mapActions(['addToVuex','empty']),
        //清空购物车
        cartEmptyFn(){
            this.cartArr= localStorage.removeItem('cartDataInfo');
            this.submitText='去结账(0)';
            this.allGoodsMoney=0;
            this.isCartEmpty=true;
            this.empty();


        },
        onSubmit(){
        this.$dialog.alert({message :'共'+this.allGoodsNum +'个商品，总计：'+this.allGoodsMoney+'元'})
        .then(()=>{
            Toast.success('支付成功');
            this.cartEmptyFn();

        })
        },
        //计算所有商品总数
        countAllGoodsNum(){
            this.allGoodsNum=0;
            for (let i=0;i<this.cartArr.length;i++){
                this.allGoodsNum += this.cartArr[i]._num;
            }
            this.submitText='去结账('+this.allGoodsNum+')'

        },
        //计算所有商品总价
        countAllGoodsMoney(){
            this.allGoodsMoney=0;
            for (let i=0;i<this.cartArr.length;i++){
                this.allGoodsMoney += this.cartArr[i]._num*this.cartArr[i]._price;
            }
        },

        addBtnFn(){
            this.countAllGoodsNum();
            this.countAllGoodsMoney();
        },
        minusBtnFn(){
            this.countAllGoodsNum();
            this.countAllGoodsMoney();
        },
        goback(){
            this.$router.push({path:'/'},()=>{
				localStorage.setItem('inxState',0);
					});
        },
    }
}
</script>
<style scoped>
	.pr{position: relative;}
      .pa{position: absolute;}
      h1, h2 {
        font-weight: normal;
      }
      ul {
        list-style-type: none;
        padding: 0;
      }
      li {
        display: inline-block;
        margin: 0 10px;
      }
      a {
        color: #42b983;
      }
      h2.title{font-size: 20px;text-align: center;}
      .cle:after{
        content: '.';
        overflow: hidden;
        visibility: hidden;
        height: 0;
        display: block;
        clear: both;
      }
	.goodsDiv{
		width: 95%;margin:5px auto;clear: both;
	}
	.goodsDiv label{
		float: left;width: 100px;margin:10px auto;
		overflow: hidden;border-radius: 10px;
	}
	.goodsDiv label img{
		width: 100px;height: 110px;
	}
	.goodsDiv h2{font-size: 22px;}
    .eachGood{width:90%;height:130px;border:1px solid #ddd;
    border-radius:10px;margin:5px auto;
    }
    .submitFn {
        position: absolute; bottom:55px;
    }
</style>
